<script setup>
import axios from 'axios';
import { ref } from 'vue';
const MyData = ref([])
//获取我的选课
const getMyLessons = () =>{
    axios.get('http://localhost:3000/mylessons').then(res => {
    MyData.value = res.data
    console.log(res.data)
  })
}
getMyLessons()
//取消选课  
const cancel = async (row,$index)  => {
  await axios.delete('http://localhost:3000/mylessons/'+row.row.id)
  getMyLessons()
  ElMessage({
    type: 'success',
    message: '退课成功',
  })
}

</script>

<template>
  <el-table :data="MyData" empty-text="未选课" stripe style="width: 100%" height="100%" show-summary sum-text="合计学分" >
    <el-table-column  prop="name" label="课程"></el-table-column >
    <el-table-column  prop="time" label="时间"></el-table-column >
    <el-table-column  prop="place" label="地点"></el-table-column >
    <el-table-column  prop="teacher" label="教师"></el-table-column >
    <el-table-column  prop="grade" label="学分"></el-table-column >
    <el-table-column  prop="class" label="类别"></el-table-column>
    <el-table-column   label="操作">
      <template #default="row,$index">
        <el-button type="danger"  @click="cancel(row,$index)">退课</el-button>
      </template>
    </el-table-column>
  </el-table>
  
</template>